.box {
  background-color: #ff0000;
  color: #ffffff;
  width: 10rem;
  height: 10rem;
}

.box1 {
  /* 
    margin是外边距 
  */
  margin: 2rem;
  /* 
    padding是内边距
  */
  padding: 1rem;
}
/* 
  标记选择器
  表示对应名称的标记套用样式
*/
body {
  margin: 0px;
}

.box2 {
  /* 
    border表示边框
    三个参数的意思分别是
    边框的宽度（2px）
    边框的线形（solid：单线条）
    边框的颜色（#ff0000）
  */
  border: 2px solid #ff0000;
  margin: 1rem;
  padding: 0.5rem 1rem 1.5rem 2rem;
}

.box3 {
  border: 1px solid #ff00ff;
}

/* 
  盒模型总结，简单的理解就是元素所占用的空间，由下面的样式综合决定
  width:宽，height：高，border：边框，padding：内边距，margin：外边距
  行内元素，比如：span,a,i,b,u默认都无法正常的理解盒模型相关的样式
  只有块元素，比如：div，p，h1，才会正确的理解盒模型相关样式
  这是由两者的默认显示模式造成的
  块元素的display值为block，行内元素的display值为inline
*/

.btn {
  background-color: #0000ff;
  color: #ffffff;
  padding: 0.5rem 1.5rem;
  margin: 0.5rem;

  /* 
    display是元素的显示模式
    inline-block表示保留行内元素的特征的同时，支持盒模型相关的样式设置
  */
  display: inline-block;
  /* 
    border-radius是圆角，值是圆角的大小
  */
  border-radius: 0.5rem;
}

/* 
  选择器:hover表示当鼠标进入选择器对应的元素之后要套用的样式
  鼠标离开之后会自动恢复原有的样式
*/
.btn:hover {
  background-color: #35359b;
  cursor: pointer;
}

.circle {
  display: inline-block;
  border: 1px solid #ff0000;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  padding: 0.5rem;
  text-align: center;
  margin: 1rem;
}

.circle1 {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  padding: 0.5rem;
  text-align: center;
  margin: 1rem;
  background-color: #ff0000;
  color: #ffffff;
}

/* 
如果希望看到border-radius的圆角效果
一般要么是给元素边框，要么是给出不一样的背景颜色
*/
